<template>
  <div class="middle">
    <el-button type="success" class="add" @click="onAddgoods">+</el-button>
    <el-button type="primary" @click="onRemoveGoods">-</el-button>
    <el-button class="darrowright" @click="onAddgoodsAll"
      ><el-icon><DArrowRight /></el-icon
    ></el-button>
    <el-button @click="onRemoveGoodsAll"
      ><el-icon><DArrowLeft /></el-icon
    ></el-button>
  </div>
</template>

<script lang="ts" setup>
const emits = defineEmits(['onAddgoods', 'onRemoveGoods', 'onAddgoodsAll', 'onRemoveGoodsAll'])
//添加商品
const onAddgoods = () => {
  emits('onAddgoods')
}
//移除商品
const onRemoveGoods = () => {
  emits('onRemoveGoods')
}
//全部添加
const onAddgoodsAll = () => {
  emits('onAddgoodsAll')
}
//全部删除
const onRemoveGoodsAll = () => {
  emits('onRemoveGoodsAll')
}
</script>

<style lang="scss" scoped>
.middle {
  width: 100px;
  height: 100%;
  background: #fff;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  text-align: center;
  .el-button {
    display: block;
    margin: 20px auto;
    width: 60px;
    font-size: 20px;
    line-height: 10px;
  }
  .add {
    margin-top: 200px;
  }
  .darrowright {
    margin-top: 40px;
  }
}
</style>
